<template>
	<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
		<view v-if="state.list.length" class="ss-m-15">
			<s-address-item
				hasBorderBottom
				v-for="item in state.list"
				:key="item.id"
				:item="item"
				@tap="onSelect(item)"
				@reload = "onLoadAddress"
			>
			</s-address-item>
		</view>

		<su-fixed bottom placeholder>
			<view class="footer-box ss-flex ss-row-between ss-p-20">
				<!-- 微信小程序和微信H5 -->
				<button
					v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes($platform.name)"
					@tap="importWechatAddress"
					class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
				>
					<text
						class="cicon-weixin ss-p-r-10"
						style="color: #09bb07; font-size: 40rpx"
					></text>
					导入微信地址
				</button>
				<button
					class="add-btn ss-reset-button ui-Shadow-Main"
					@tap="$router.go('/pages/user/address/edit')"
				>
					新增收货地址
				</button>
			</view>
		</su-fixed>
		<s-empty
			v-if="state.list.length === 0 && !state.loading"
			text="暂无收货地址"
			icon="/static/data-empty.png"
		/>
	</s-layout>
</template>

<script setup>
	import { reactive, onBeforeMount } from 'vue';
	import { onShow } from '@dcloudio/uni-app';

	import { isEmpty } from 'lodash';

	import $platform from '/shop/platform/index.js';

	import $router from '/shop/router/index.js';
	import $user from '/shop/api/user.js';
	import $data from '/shop/api/data.js';

	const state = reactive({
		list: [],
		loading: true,
	});

	// 选择收货地址
	const onSelect = (addressInfo) => {
		uni.$emit('SELECT_ADDRESS', {
			addressInfo,
		});
		$router.back();
	};

	// 导入微信地址
	function importWechatAddress() {
		let wechatAddress = {};
		// #ifdef MP
		uni.chooseAddress({
			success: (res) => {
				wechatAddress = {
					consignee: res.userName,
					mobile: res.telNumber,
					province_name: res.provinceName,
					city_name: res.cityName,
					district_name: res.countyName,
					address: res.detailInfo,
					region: '',
					is_default: false,
				};
				if (!isEmpty(wechatAddress)) {
					$router.go('/pages/user/address/edit', {
						data: JSON.stringify(wechatAddress),
					});
				}
			},
			fail: (err) => {
				console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
			},
		});
		// #endif
		// #ifdef H5
		$platform.useProvider('wechat').jssdk.openAddress({
			success: (res) => {
				wechatAddress = {
					consignee: res.userName,
					mobile: res.telNumber,
					province_name: res.provinceName,
					city_name: res.cityName,
					district_name: res.countryName,
					address: res.detailInfo,
					region: '',
					is_default: false,
				};
				if (!isEmpty(wechatAddress)) {
					$router.go('/pages/user/address/edit', {
						data: JSON.stringify(wechatAddress),
					});
				}
			},
		});
		// #endif
	}

	onShow(() => {
		onLoadAddress();
		
	});

	const onLoadAddress = async () => {
		const { data } = await $user.address.list();
		state.list = data;
		state.loading = false;
	};

	onBeforeMount(() => {
		console.log('before mount');
		if (!!uni.getStorageSync('areaData')) {
			return;
		}
		// 提前加载省市区数据
		$data.area().then((res) => {
			if (res.code === '0') {
				uni.setStorageSync('areaData', res.data);
			}
		});
	});
</script>

<style lang="scss" scoped>
	.footer-box {
		.add-btn {
			flex: 1;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			border-radius: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			color: $white;
			position: relative;
			z-index: 1;
		}

		.sync-wxaddress {
			flex: 1;
			line-height: 80rpx;
			background: $white;
			border-radius: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: $dark-6;
			margin-right: 18rpx;
		}
	}
</style>
